<template>
    <view class="content">
        <view id="add">
            <text class="iconfont icon-tianjia" @click="dakaizicaidan"></text>
            <text @click="dakaizicaidan">添加</text>
        </view>
        <view id="jijiangshengri">
            <view class="jijiangshengri clear" v-for="item in birthdayData" :key="item.id" @click="chakanxiangqing" :data-item='JSON.stringify(item)'>
                <view class="touxiang">
                    <img src="../../static/img/katong.png" alt="">
                </view>
                <view class="xinxi" >
                    <view class="clear">
                        <text>{{item.name}}</text>
                        <text>{{item.countday}}天</text>
                    </view>
                    <view class="clear">
                        <text>{{item.Shengxiao}}/{{item.Xingzuo}}/{{item.Nongli}}</text>
                        <text>后23岁生日</text>
                    </view>
                    <view class="clear">
                        <text>{{item.Guanxi}}</text>
                        <text>{{item.gongli}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!--iview-->
<!--        <i-action-sheet :visible=visible1 :actions=actions1 show-cancel @cancel="handleCancel1" @click="handleClickItem1" />-->
    </view>
</template>

<script>
    import * as api from '../../utils/api'
    export default {
        name: "birthdayGuanli",
        data(){
            return{
                birthdayData:[],
                visible1: false,
                actions1: [
                    {
                        name: '我来录入',
                    },
                    {
                        name: '请好友协助录入'
                    }
                ],
            }
        },
        onLoad: function () {
            uni.request({
                url: api.GET_ALL_BIRTHDAY,
                method:'get',
                params:{},
                success: (res) => {
                    this.birthdayData = res.data.data
                }
            });
        },
        methods:{
            dakaizicaidan(){
                uni.showActionSheet({
                    itemList: ['我来录入', '请好友协助录入'],
                    success: function (res) {
                        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                        uni.navigateTo({
                            url: '/pages/index/addBirthday?title=1'
                        })
                    },
                    fail: function (res) {
                        //点击取消
                        // console.log(res.errMsg);
                    }
                });
            },
            chakanxiangqing(e){
                let item=JSON.parse(e.currentTarget.dataset.item);
                console.log(item.name);
                uni.navigateTo({
                    url: '/pages/index/addBirthday?title=2&name='+item.name
                })
            },
            handleOpen1 () {
                this.visible1 = true
            },
            handleCancel1 () {
                this.visible1 = false
            },
            handleClickItem1 ({ detail }) {
                // const index = detail.index + 1;
                // console.log(detail.index)
                if (detail.index === 0){
                    console.log('我来录入');
                    uni.navigateTo({
                        url: '/pages/index/addBirthday'
                    })
                }else{
                    console.log('请好友协助录入');
                    uni.navigateTo({
                      url: '/pages/index/addBirthday'
                    })
                }
            },
        }
    }
</script>

<style scoped>
    .content{
        width: 690rpx;
        margin: auto;
        /*border: 1px solid red;*/
    }
    #add{
        height: 80rpx;
        line-height: 80rpx;
        margin: 20rpx 0 10rpx 0;
    }
    #add>text:nth-of-type(1){
        font-size: 40rpx;
        color: #F48FB1;
        margin-right: 20rpx;
    }
    #jijiangshengri{
        width: 100%;
    }
    .jijiangshengri{
        width: 100%;
        height: 204rpx;
        background: #FFFFFF;
        box-shadow: -1rpx 0rpx 7rpx 0rpx rgba(244, 143, 177, 0.63);
        border-radius: 20rpx;
        margin: 30rpx 0;
    }
    .touxiang{
        float: left;
        width: 144rpx;
        height: 144rpx;
        background: rgba(244, 143, 177, 0.39);
        border-radius: 50%;
        margin: 30rpx 20rpx;
    }
    .touxiang>img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .xinxi{
        float: right;
        width: 500rpx;
        height: 100%;
        /*border: 1px solid forestgreen;*/
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .xinxi>view>text:nth-of-type(1){
        float: left;
        font-size: 32rpx;
        color: #333333;
    }
    .xinxi>view>text:nth-of-type(2){
        float: right;
        font-size: 32rpx;
        color: #333333;
        margin-right: 10rpx;
    }
    .xinxi>view:nth-of-type(1)>text{
        font-weight: bold;
    }
</style>